<template>
	<view class="e-skeleton-list" :style="[customStyle]">
		<view class="e-skeleton-list__item" v-for="(item, index) in list" :key="index">
			<view class="e-skeleton-list__item__avatar" :class="[config.avatarShape === 'circle' && 'e-skeleton-list__item__avatar--circle']" v-if="config.showAvatar">
				<SkeletonBlock>
					<view class="e-skeleton-list__item__avatar-block"></view>
				</SkeletonBlock>
			</view>

			<view class="e-skeleton-list__item__section">
				<SkeletonBlock>
					<view class="e-skeleton-list__item__section-name" ></view>
				</SkeletonBlock>
				<view class="e-skeleton-list__item__section-desc" >
					<SkeletonBlock>
						<view class="e-skeleton-list__item__section-desc-block" ></view>
					</SkeletonBlock>
				</view>
				
				
			</view>
		</view>
	</view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
	name: 'skeleton-list'
});
</script>

<script lang="ts" setup>
import { computed } from 'vue';
import SkeletonBlock from './block.vue';

const props = withDefaults(
	defineProps<{
		config: {
			length: number;
			showAvatar: boolean;
			avatarShape: 'circle' | 'square';
		};
		customStyle?: Record<any, any>|string;
		animate?: boolean;
	}>(),
	{
		config: () => ({
			length: 5,
			showAvatar: true,
			avatarShape: 'square'
		})
	}
);

const list = computed(() => {
	return [...new Array(props.config.length).keys()];
});
</script>

<style lang="scss" scoped>
@import '../../libs/theme/skeleton-list.scss';
</style>
